import { Breadcrumb } from "antd";
import { Link } from "react-router";
import "./index.scss";
import { useEffect, useState } from "react";
import routerStore from "@/store/router";
import { observer } from "mobx-react-lite";
import { Navigate, useNavigate } from "react-router-dom";
import { HomeOutlined } from "@ant-design/icons";
import { HomePath } from "@/config";

const BreadcrumbBar = () => {
  // navigate
  const navigate = useNavigate();
  // 面包屑数据
  const [breadcrumbData, setBreadcrumbData] = useState([]);

  // 权限路由列表
  let authRouteList = JSON.parse(localStorage.getItem("authMenuList"));

  // 处理路由项数据的函数
  const disposeRouteItemData = (routes) => {
    let nRouters = routes.map((route) => {
      if (route.children) {
        route.children = disposeRouteItemData(route.children);
      }
      return {
        path: route.path,
        title: route.meta.title,
        // children: route.children ? route.children : null,
      };
    });
    return nRouters;
  };

  // 处理路由数据的函数
  const disposeRouteData = () => {
    console.log("authRouteList", authRouteList);

    let nBreadcrumbData = disposeRouteItemData(authRouteList);
    setBreadcrumbData(nBreadcrumbData);
    console.log("处理后面包屑数据", nBreadcrumbData);
  };

  // Effect
  useEffect(() => {
    disposeRouteData();
  }, []);

  const items = [
    {
      path: "/index",
      title: "home",
    },
    {
      path: "/first",
      title: "first",
      children: [
        {
          path: "/general",
          title: "General",
        },
        {
          path: "/layout",
          title: "Layout",
        },
        {
          path: "/navigation",
          title: "Navigation",
        },
      ],
    },
    {
      path: "/second",
      title: "second",
    },
  ];

  // 跳转函数
  const toPath = (currentRoute, items) => {
    console.log("path", currentRoute.path);
    console.log("items", items);
    let tPath = currentRoute.isEle
      ? currentRoute.path
      : currentRoute.childrenPath[0];

    let tKeys = currentRoute.isEle
      ? currentRoute.key
      : [items[0].key, currentRoute.key, currentRoute.childrenKeys[0]];

    console.log("面包屑跳转", tPath);
    routerStore.setCurrentRouteKeyPath(tKeys);
    navigate(tPath);
  };

  function itemRender(currentRoute, params, items, paths) {
    const isLast = currentRoute?.path === items[items.length - 1]?.path;

    return isLast ? (
      <span>{currentRoute.title}</span>
    ) : (
      //  {currentRoute.title},
      //   <Navigate to={paths}>
      <a
        onClick={() => {
          console.log("currentRoute", currentRoute);
          toPath(currentRoute, items);
        }}
      >
        {currentRoute.title}
      </a>
      //   </Navigate>
    );
  }

  return (
    <>
      <HomeOutlined
        style={{
          fontSize: 17,
          color: "rgb(80, 80, 80)",
          marginRight: 10,
          cursor: "pointer",
          position: "relative",
          top: "-2px",
        }}
        onClick={() => {
          navigate(HomePath);
          routerStore.setCurrentRouteKeyPath(["0"]);
        }}
      />
      <Breadcrumb itemRender={itemRender} items={routerStore.breadcrumbData} />
    </>
  );
};

export default observer(BreadcrumbBar);
